<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信访分析系统 - 系统设置</title>
    <script src="./static/vendor/js/tailwindcss-3.4.17.js"></script>
    <link rel="stylesheet" href="./static/vendor/css/font-awesome-6.4.0.all.min.css">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8fafc;
        }

        /* 自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* 侧边栏动画 */
        .sidebar {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .sidebar-collapsed {
            width: 64px !important;
        }
        .sidebar-expanded {
            width: 15% !important;
        }

        /* 文本淡入淡出 */
        .fade-text {
            transition: opacity 0.3s ease-in-out;
        }
        .fade-text.hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* 设置卡片 */
        .settings-card {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .settings-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.6s;
        }
        .settings-card:hover::before {
            left: 100%;
        }
        .settings-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.15);
        }

        /* 玻璃态效果 */
        .glass-effect {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* 导航菜单项 */
        .nav-item {
            transition: all 0.3s ease;
            position: relative;
        }
        .nav-item::after {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 0;
            background: var(--primary-gradient);
            border-radius: 0 2px 2px 0;
            transition: height 0.3s ease;
        }
        .nav-item:hover::after,
        .nav-item.active::after {
            height: 70%;
        }
        .nav-item:hover {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, transparent 100%);
        }
        .nav-item.active {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.15) 0%, transparent 100%);
            color: #667eea;
        }

        /* Tab切换 */
        .tab-content {
            display: none;
            animation: fadeIn 0.3s ease-in;
        }
        .tab-content.active {
            display: block;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Toggle开关 */
        .toggle-switch {
            position: relative;
            width: 48px;
            height: 24px;
            background-color: #e5e7eb;
            border-radius: 12px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .toggle-switch.active {
            background-color: #3b82f6;
        }
        .toggle-switch::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: white;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: transform 0.3s;
        }
        .toggle-switch.active::after {
            transform: translateX(24px);
        }

        /* 日志条目 */
        .log-entry {
            border-left: 3px solid #e5e7eb;
            padding-left: 12px;
            transition: all 0.3s ease;
        }
        .log-entry:hover {
            border-color: #3b82f6;
            background: rgba(102, 126, 234, 0.05);
            transform: translateX(5px);
        }
        .log-entry.error {
            border-color: #ef4444;
        }
        .log-entry.warning {
            border-color: #f59e0b;
        }
        .log-entry.success {
            border-color: #10b981;
        }

        /* 用户下拉菜单 */
        .user-dropdown {
            transform-origin: top right;
            transition: all 0.2s ease;
        }
        .user-dropdown.hidden {
            opacity: 0;
            transform: scale(0.95);
            pointer-events: none;
        }
        .user-dropdown.show {
            opacity: 1;
            transform: scale(1);
            pointer-events: all;
        }

        /* 表格样式 */
        .table-hover tbody tr:hover {
            background: rgba(102, 126, 234, 0.05);
            transition: background 0.3s ease;
        }
    </style>
</head>
<body class="bg-slate-50">
    <div class="flex h-screen overflow-hidden">
        <!-- 左侧边栏 -->
        <div id="sidebar" class="sidebar sidebar-expanded bg-white shadow-xl border-r border-slate-200 flex flex-col">
            <!-- 应用标题 -->
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg">
                            <i class="fas fa-file-contract text-white text-lg"></i>
                        </div>
                        <div class="fade-text">
                            <h1 class="font-bold text-xl bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">信访分析系统</h1>
                            <p class="text-xs text-slate-500">智能分析平台</p>
                        </div>
                    </div>
                    <button id="sidebarToggle" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-bars text-slate-600"></i>
                    </button>
                </div>
            </div>

            <!-- 导航菜单 -->
            <div class="flex-1 overflow-y-auto custom-scrollbar">
                <nav class="p-4">
                    <ul class="space-y-2">
                        <li>
                            <a href="dashboard.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-tachometer-alt text-lg"></i>
                                <span class="fade-text font-medium">仪表盘</span>
                            </a>
                        </li>
                        <li>
                            <a href="analysis-results.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-search text-lg"></i>
                                <span class="fade-text font-medium">分析结果</span>
                            </a>
                        </li>
                        <li>
                            <a href="petition-statistics.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-chart-bar text-lg"></i>
                                <span class="fade-text font-medium">信访件统计</span>
                            </a>
                        </li>
                        <li>
                            <a href="regional-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-map text-lg"></i>
                                <span class="fade-text font-medium">区域分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="coordinate-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-map-marker-alt text-lg"></i>
                                <span class="fade-text font-medium">经纬度分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="key-issues.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-exclamation-triangle text-lg"></i>
                                <span class="fade-text font-medium">重点问题分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="report-generation.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-file-alt text-lg"></i>
                                <span class="fade-text font-medium">生成报告</span>
                            </a>
                        </li>
                        
                        <!-- 管理员功能 -->
                        <li class="pt-4 mt-4 border-t border-slate-200">
                            <p class="fade-text text-xs text-slate-500 font-semibold px-4 mb-2">管理员功能</p>
                        </li>
                        <li>
                            <a href="ai-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-robot text-lg"></i>
                                <span class="fade-text font-medium">AI分析功能</span>
                            </a>
                        </li>
                        <li>
                            <a href="system-settings.html" class="nav-item active flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-cog text-lg"></i>
                                <span class="fade-text font-medium">系统设置</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!-- 用户信息 -->
            <div class="p-4 border-t border-slate-200">
                <div class="flex items-center space-x-3">
                    <div class="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500 flex items-center justify-center shadow-lg">
                        <i class="fas fa-user text-white text-lg"></i>
                    </div>
                    <div class="fade-text flex-1">
                        <p class="font-semibold text-slate-800">管理员</p>
                        <p class="text-xs text-slate-500">admin@example.com</p>
                    </div>
                    <div class="relative">
                        <button id="userMenuBtn" class="fade-text p-2 rounded-lg hover:bg-slate-100 transition-colors">
                            <i class="fas fa-chevron-down text-slate-600"></i>
                        </button>
                        <!-- 下拉菜单 -->
                        <div id="userMenu" class="user-dropdown hidden absolute right-0 bottom-full mb-2 w-48 bg-white rounded-lg shadow-lg border border-slate-200">
                            <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 rounded-t-lg">
                                <i class="fas fa-user-circle mr-2"></i>个人中心
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100">
                                <i class="fas fa-cog mr-2"></i>账户设置
                            </a>
                            <hr class="my-1 border-slate-200">
                            <a href="login.html" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 rounded-b-lg">
                                <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部栏 -->
            <header class="bg-white border-b border-slate-200 px-6 py-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-2xl font-bold text-slate-800">系统设置</h2>
                        <p class="text-sm text-slate-500">管理系统配置和参数</p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <!-- 通知图标 -->
                        <button class="relative p-2 rounded-lg hover:bg-slate-100 transition-colors">
                            <i class="fas fa-bell text-slate-600"></i>
                            <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
                        </button>
                        <!-- 全屏按钮 -->
                        <button id="fullscreenBtn" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                            <i class="fas fa-expand text-slate-600"></i>
                        </button>
                        <!-- 时间显示 -->
                        <div class="text-sm text-slate-600">
                            <i class="far fa-clock mr-1"></i>
                            <span id="currentTime"></span>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 滚动内容区 -->
            <main class="flex-1 overflow-y-auto custom-scrollbar p-6">
                <!-- Settings Tabs -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 mb-8">
                    <div class="border-b border-slate-200">
                        <nav class="flex space-x-8 px-6" aria-label="Settings tabs">
                            <button class="tab-btn py-4 px-1 border-b-2 border-blue-500 font-medium text-sm text-blue-600" data-tab="account">
                                账号管理
                            </button>
                            <button class="tab-btn py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="system">
                                系统配置
                            </button>
                            <button class="tab-btn py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="security">
                                安全设置
                            </button>
                            <button class="tab-btn py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="backup">
                                备份恢复
                            </button>
                            <button class="tab-btn py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="logs">
                                系统日志
                            </button>
                        </nav>
                    </div>

                    <!-- Account Management Tab -->
                    <div id="account-tab" class="tab-content active p-6">
                        <div class="mb-6">
                            <h3 class="text-xl font-bold text-slate-800 mb-2">账号管理</h3>
                            <p class="text-slate-600">管理系统用户账号和权限</p>
                        </div>

                        <!-- Add User Button -->
                        <div class="mb-6">
                            <button onclick="showAddUserModal()" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-2.5 rounded-lg hover:shadow-lg transition-all duration-300">
                                <i class="fas fa-plus mr-2"></i>添加用户
                            </button>
                        </div>

                        <!-- Users Table -->
                        <div class="overflow-x-auto rounded-lg border border-slate-200">
                            <table class="min-w-full divide-y divide-slate-200 table-hover">
                                <thead class="bg-slate-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">用户名</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">邮箱</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">角色</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">状态</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">最后登录</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">操作</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-slate-200">
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center mr-3">
                                                    <i class="fas fa-user text-white"></i>
                                                </div>
                                                <div>
                                                    <div class="text-sm font-medium text-slate-900">admin</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">admin@example.com</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
                                                管理员
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                <i class="fas fa-circle text-xs mr-1"></i>在线
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">2024-01-15 14:30</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <button onclick="showEditUserModal('admin', 'admin@example.com')" class="text-indigo-600 hover:text-indigo-900 mr-3 transition-colors">编辑</button>
                                            <button class="text-red-600 hover:text-red-900 transition-colors">删除</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center mr-3">
                                                    <i class="fas fa-user text-white"></i>
                                                </div>
                                                <div>
                                                    <div class="text-sm font-medium text-slate-900">zhangsan</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">zhangsan@example.com</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                                普通用户
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-slate-100 text-slate-800">
                                                <i class="fas fa-circle text-xs mr-1"></i>离线
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">2024-01-15 09:15</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <button onclick="showEditUserModal('zhangsan', 'zhangsan@example.com')" class="text-indigo-600 hover:text-indigo-900 mr-3 transition-colors">编辑</button>
                                            <button class="text-red-600 hover:text-red-900 transition-colors">删除</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- System Configuration Tab -->
                    <div id="system-tab" class="tab-content p-6">
                        <div class="mb-6">
                            <h3 class="text-xl font-bold text-slate-800 mb-2">系统配置</h3>
                            <p class="text-slate-600">配置系统基本参数和功能开关</p>
                        </div>

                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <!-- Basic Settings -->
                            <div class="settings-card bg-white border border-slate-200 rounded-xl p-6">
                                <h4 class="text-lg font-semibold text-slate-800 mb-4">基本设置</h4>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-slate-700 mb-1">系统名称</label>
                                        <input type="text" value="信访分析系统" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-700 mb-1">系统描述</label>
                                        <textarea rows="3" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">基于大模型的智能信访分析平台</textarea>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-700 mb-1">时区</label>
                                        <select class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                            <option>Asia/Shanghai (UTC+8)</option>
                                            <option>UTC</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Feature Settings -->
                            <div class="settings-card bg-white border border-slate-200 rounded-xl p-6">
                                <h4 class="text-lg font-semibold text-slate-800 mb-4">功能开关</h4>
                                <div class="space-y-4">
                                    <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">AI分析功能</p>
                                            <p class="text-xs text-slate-500">启用大模型分析能力</p>
                                        </div>
                                        <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                                    </div>
                                    <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">实时数据同步</p>
                                            <p class="text-xs text-slate-500">自动同步最新数据</p>
                                        </div>
                                        <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                                    </div>
                                    <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">邮件通知</p>
                                            <p class="text-xs text-slate-500">发送系统通知邮件</p>
                                        </div>
                                        <div class="toggle-switch" onclick="toggleSwitch(this)"></div>
                                    </div>
                                    <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">自动备份</p>
                                            <p class="text-xs text-slate-500">定时备份系统数据</p>
                                        </div>
                                        <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                                    </div>
                                </div>
                            </div>

                            <!-- Data Settings -->
                            <div class="settings-card bg-white border border-slate-200 rounded-xl p-6">
                                <h4 class="text-lg font-semibold text-slate-800 mb-4">数据设置</h4>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-slate-700 mb-1">数据保留天数</label>
                                        <input type="number" value="365" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-700 mb-1">批量导入限制</label>
                                        <input type="number" value="1000" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-700 mb-1">数据刷新间隔（分钟）</label>
                                        <input type="number" value="30" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                    </div>
                                </div>
                            </div>

                            <!-- API Settings -->
                            <div class="settings-card bg-white border border-slate-200 rounded-xl p-6">
                                <h4 class="text-lg font-semibold text-slate-800 mb-4">API设置</h4>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-slate-700 mb-1">API密钥</label>
                                        <div class="flex">
                                            <input type="password" value="sk-xxxxxx" class="flex-1 px-4 py-2.5 border border-slate-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                            <button class="px-4 py-2.5 bg-slate-100 border border-l-0 border-slate-300 rounded-r-lg hover:bg-slate-200 transition-colors">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-700 mb-1">请求限制（次/分钟）</label>
                                        <input type="number" value="60" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-700 mb-1">CORS域名</label>
                                        <input type="text" placeholder="http://localhost:3000" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-6">
                            <button class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-2.5 rounded-lg hover:shadow-lg transition-all duration-300">
                                保存配置
                            </button>
                        </div>
                    </div>

                    <!-- Security Settings Tab -->
                    <div id="security-tab" class="tab-content p-6">
                        <div class="mb-6">
                            <h3 class="text-xl font-bold text-slate-800 mb-2">安全设置</h3>
                            <p class="text-slate-600">配置系统安全策略和访问控制</p>
                        </div>

                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <!-- Password Policy -->
                            <div class="settings-card bg-white border border-slate-200 rounded-xl p-6">
                                <h4 class="text-lg font-semibold text-slate-800 mb-4">密码策略</h4>
                                <div class="space-y-4">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">最小密码长度</p>
                                            <p class="text-xs text-slate-500">密码最少字符数</p>
                                        </div>
                                        <input type="number" value="8" class="w-20 px-3 py-2 border border-slate-300 rounded-lg text-center focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    </div>
                                    <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">必须包含大写字母</p>
                                            <p class="text-xs text-slate-500">A-Z</p>
                                        </div>
                                        <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                                    </div>
                                    <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">必须包含数字</p>
                                            <p class="text-xs text-slate-500">0-9</p>
                                        </div>
                                        <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                                    </div>
                                    <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">必须包含特殊字符</p>
                                            <p class="text-xs text-slate-500">!@#$%^&*</p>
                                        </div>
                                        <div class="toggle-switch" onclick="toggleSwitch(this)"></div>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">密码有效期（天）</p>
                                            <p class="text-xs text-slate-500">0表示永不过期</p>
                                        </div>
                                        <input type="number" value="90" class="w-20 px-3 py-2 border border-slate-300 rounded-lg text-center focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    </div>
                                </div>
                            </div>

                            <!-- Login Security -->
                            <div class="settings-card bg-white border border-slate-200 rounded-xl p-6">
                                <h4 class="text-lg font-semibold text-slate-800 mb-4">登录安全</h4>
                                <div class="space-y-4">
                                    <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">双因子认证</p>
                                            <p class="text-xs text-slate-500">启用2FA验证</p>
                                        </div>
                                        <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                                    </div>
                                    <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">登录失败锁定</p>
                                            <p class="text-xs text-slate-500">连续失败后锁定账号</p>
                                        </div>
                                        <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">最大失败次数</p>
                                            <p class="text-xs text-slate-500">达到次数后锁定</p>
                                        </div>
                                        <input type="number" value="5" class="w-20 px-3 py-2 border border-slate-300 rounded-lg text-center focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">锁定时间（分钟）</p>
                                            <p class="text-xs text-slate-500">账号锁定时长</p>
                                        </div>
                                        <input type="number" value="30" class="w-20 px-3 py-2 border border-slate-300 rounded-lg text-center focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">会话超时（分钟）</p>
                                            <p class="text-xs text-slate-500">无操作自动登出</p>
                                        </div>
                                        <input type="number" value="30" class="w-20 px-3 py-2 border border-slate-300 rounded-lg text-center focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    </div>
                                </div>
                            </div>

                            <!-- IP Restrictions -->
                            <div class="settings-card bg-white border border-slate-200 rounded-xl p-6">
                                <h4 class="text-lg font-semibold text-slate-800 mb-4">IP限制</h4>
                                <div class="space-y-4">
                                    <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">启用IP白名单</p>
                                            <p class="text-xs text-slate-500">仅允许白名单IP访问</p>
                                        </div>
                                        <div class="toggle-switch" onclick="toggleSwitch(this)"></div>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-700 mb-1">允许的IP地址</label>
                                        <textarea rows="4" placeholder="每行一个IP地址或IP段&#10;例如：192.168.1.0/24" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"></textarea>
                                    </div>
                                    <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">限制登录地区</p>
                                            <p class="text-xs text-slate-500">仅允许特定地区登录</p>
                                        </div>
                                        <div class="toggle-switch" onclick="toggleSwitch(this)"></div>
                                    </div>
                                </div>
                            </div>

                            <!-- Audit Log -->
                            <div class="settings-card bg-white border border-slate-200 rounded-xl p-6">
                                <h4 class="text-lg font-semibold text-slate-800 mb-4">审计日志</h4>
                                <div class="space-y-4">
                                    <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">记录所有操作</p>
                                            <p class="text-xs text-slate-500">记录用户所有操作日志</p>
                                        </div>
                                        <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">日志保留天数</p>
                                            <p class="text-xs text-slate-500">自动清理过期日志</p>
                                        </div>
                                        <input type="number" value="180" class="w-20 px-3 py-2 border border-slate-300 rounded-lg text-center focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    </div>
                                    <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
                                        <div>
                                            <p class="text-sm font-medium text-slate-700">敏感操作通知</p>
                                            <p class="text-xs text-slate-500">敏感操作发送通知</p>
                                        </div>
                                        <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-700 mb-1">通知邮箱</label>
                                        <input type="email" placeholder="admin@example.com" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-6">
                            <button class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-2.5 rounded-lg hover:shadow-lg transition-all duration-300">
                                保存安全设置
                            </button>
                        </div>
                    </div>

                    <!-- Backup and Recovery Tab -->
                    <div id="backup-tab" class="tab-content p-6">
                        <div class="mb-6">
                            <h3 class="text-xl font-bold text-slate-800 mb-2">备份恢复</h3>
                            <p class="text-slate-600">管理系统数据备份和恢复</p>
                        </div>

                        <!-- Manual Backup -->
                        <div class="settings-card bg-white border border-slate-200 rounded-xl p-6 mb-6">
                            <h4 class="text-lg font-semibold text-slate-800 mb-4">手动备份</h4>
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-slate-600">创建完整的系统数据备份</p>
                                    <p class="text-sm text-slate-500 mt-1">上次备份：2024-01-15 10:00</p>
                                </div>
                                <button class="bg-gradient-to-r from-green-500 to-emerald-600 text-white px-6 py-2.5 rounded-lg hover:shadow-lg transition-all duration-300">
                                    <i class="fas fa-download mr-2"></i>立即备份
                                </button>
                            </div>
                        </div>

                        <!-- Backup Schedule -->
                        <div class="settings-card bg-white border border-slate-200 rounded-xl p-6 mb-6">
                            <h4 class="text-lg font-semibold text-slate-800 mb-4">自动备份计划</h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-1">备份频率</label>
                                    <select class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                        <option>每天</option>
                                        <option>每周</option>
                                        <option>每月</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-1">备份时间</label>
                                    <input type="time" value="02:00" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-1">保留备份数</label>
                                    <input type="number" value="30" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-1">备份存储位置</label>
                                    <input type="text" value="/backups" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                </div>
                            </div>
                        </div>

                        <!-- Backup History -->
                        <div class="settings-card bg-white border border-slate-200 rounded-xl p-6">
                            <h4 class="text-lg font-semibold text-slate-800 mb-4">备份历史</h4>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between p-4 bg-slate-50 rounded-lg hover:bg-slate-100 transition-colors">
                                    <div>
                                        <p class="text-sm font-medium text-slate-900">backup_20240115_100000.sql</p>
                                        <p class="text-xs text-slate-500">大小: 125 MB | 类型: 完整备份</p>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <button class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
                                            <i class="fas fa-download"></i>
                                        </button>
                                        <button class="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors">
                                            <i class="fas fa-undo"></i>
                                        </button>
                                        <button class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between p-4 bg-slate-50 rounded-lg hover:bg-slate-100 transition-colors">
                                    <div>
                                        <p class="text-sm font-medium text-slate-900">backup_20240114_020000.sql</p>
                                        <p class="text-xs text-slate-500">大小: 118 MB | 类型: 自动备份</p>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <button class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
                                            <i class="fas fa-download"></i>
                                        </button>
                                        <button class="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors">
                                            <i class="fas fa-undo"></i>
                                        </button>
                                        <button class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Restore Section -->
                        <div class="mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                            <h4 class="text-sm font-semibold text-yellow-800 mb-2">
                                <i class="fas fa-exclamation-triangle mr-2"></i>恢复警告
                            </h4>
                            <p class="text-sm text-yellow-700">恢复操作将覆盖当前数据，请确保已备份重要数据。</p>
                        </div>
                    </div>

                    <!-- System Logs Tab -->
                    <div id="logs-tab" class="tab-content p-6">
                        <div class="mb-6">
                            <h3 class="text-xl font-bold text-slate-800 mb-2">系统日志</h3>
                            <p class="text-slate-600">查看和搜索系统运行日志</p>
                        </div>

                        <!-- Log Filters -->
                        <div class="bg-slate-50 rounded-xl p-6 mb-6">
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-1">日志级别</label>
                                    <select class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                        <option>全部</option>
                                        <option>错误</option>
                                        <option>警告</option>
                                        <option>信息</option>
                                        <option>调试</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-1">模块</label>
                                    <select class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                        <option>全部</option>
                                        <option>用户管理</option>
                                        <option>数据分析</option>
                                        <option>系统</option>
                                        <option>API</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-1">开始时间</label>
                                    <input type="datetime-local" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-1">结束时间</label>
                                    <input type="datetime-local" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                                </div>
                            </div>
                            <div class="mt-4 flex items-center justify-between">
                                <button class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-2.5 rounded-lg hover:shadow-lg transition-all duration-300">
                                    <i class="fas fa-search mr-2"></i>搜索
                                </button>
                                <button class="text-indigo-600 hover:text-indigo-800 transition-colors">
                                    <i class="fas fa-download mr-2"></i>导出日志
                                </button>
                            </div>
                        </div>

                        <!-- Log Entries -->
                        <div class="space-y-4">
                            <div class="log-entry bg-white p-4 rounded-lg">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <div class="flex items-center mb-1">
                                            <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800 mr-2">
                                                <i class="fas fa-times-circle mr-1"></i>错误
                                            </span>
                                            <span class="text-sm text-slate-500">2024-01-15 14:32:15</span>
                                            <span class="text-sm text-slate-500 ml-4">用户管理</span>
                                        </div>
                                        <p class="text-sm text-slate-800">用户登录失败：密码错误</p>
                                        <p class="text-xs text-slate-500 mt-1">IP: 192.168.1.100 | 用户: zhangsan</p>
                                    </div>
                                    <button class="text-slate-400 hover:text-slate-600 transition-colors">
                                        <i class="fas fa-chevron-right"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="log-entry warning bg-white p-4 rounded-lg">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <div class="flex items-center mb-1">
                                            <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-yellow-100 text-yellow-800 mr-2">
                                                <i class="fas fa-exclamation-triangle mr-1"></i>警告
                                            </span>
                                            <span class="text-sm text-slate-500">2024-01-15 14:30:00</span>
                                            <span class="text-sm text-slate-500 ml-4">系统</span>
                                        </div>
                                        <p class="text-sm text-slate-800">磁盘空间不足：剩余空间低于20%</p>
                                        <p class="text-xs text-slate-500 mt-1">路径: /var/log | 剩余: 15%</p>
                                    </div>
                                    <button class="text-slate-400 hover:text-slate-600 transition-colors">
                                        <i class="fas fa-chevron-right"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="log-entry success bg-white p-4 rounded-lg">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <div class="flex items-center mb-1">
                                            <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800 mr-2">
                                                <i class="fas fa-check-circle mr-1"></i>信息
                                            </span>
                                            <span class="text-sm text-slate-500">2024-01-15 14:25:30</span>
                                            <span class="text-sm text-slate-500 ml-4">数据分析</span>
                                        </div>
                                        <p class="text-sm text-slate-800">数据同步完成</p>
                                        <p class="text-xs text-slate-500 mt-1">同步记录数: 1,234 | 耗时: 5.2秒</p>
                                    </div>
                                    <button class="text-slate-400 hover:text-slate-600 transition-colors">
                                        <i class="fas fa-chevron-right"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="log-entry bg-white p-4 rounded-lg">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <div class="flex items-center mb-1">
                                            <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800 mr-2">
                                                <i class="fas fa-info-circle mr-1"></i>调试
                                            </span>
                                            <span class="text-sm text-slate-500">2024-01-15 14:20:15</span>
                                            <span class="text-sm text-slate-500 ml-4">API</span>
                                        </div>
                                        <p class="text-sm text-slate-800">API请求：/api/v1/analysis</p>
                                        <p class="text-xs text-slate-500 mt-1">方法: POST | 状态: 200 | 响应时间: 230ms</p>
                                    </div>
                                    <button class="text-slate-400 hover:text-slate-600 transition-colors">
                                        <i class="fas fa-chevron-right"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Pagination -->
                        <div class="mt-6 flex items-center justify-between">
                            <div class="text-sm text-slate-700">
                                显示 1-10 条，共 156 条记录
                            </div>
                            <div class="flex items-center space-x-2">
                                <button class="px-3 py-1 border border-slate-300 rounded-lg hover:bg-slate-50 disabled:opacity-50 transition-colors" disabled>
                                    <i class="fas fa-chevron-left"></i>
                                </button>
                                <button class="px-3 py-1 bg-indigo-600 text-white rounded-lg">1</button>
                                <button class="px-3 py-1 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">2</button>
                                <button class="px-3 py-1 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">3</button>
                                <span class="px-2">...</span>
                                <button class="px-3 py-1 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">16</button>
                                <button class="px-3 py-1 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                                    <i class="fas fa-chevron-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- Add User Modal -->
    <div id="addUserModal" class="fixed inset-0 bg-slate-900 bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-2xl max-w-md w-full transform transition-all">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-slate-800">添加新用户</h3>
                    <button onclick="hideAddUserModal()" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-times text-slate-600"></i>
                    </button>
                </div>
                <form class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">用户名 <span class="text-red-500">*</span></label>
                        <input type="text" id="add-username" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all" required pattern="^[a-zA-Z0-9_]+$" oninput="validateUsername(this)">
                        <p class="mt-1 text-sm text-slate-500">请输入英文字符</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">邮箱 <span class="text-red-500">*</span></label>
                        <input type="email" id="add-email" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all" required>
                        <p class="mt-1 text-sm text-slate-500">邮箱为找回密码使用，请填写公司邮箱</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">密码</label>
                        <input type="password" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">角色</label>
                        <select class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                            <option>管理员</option>
                            <option>普通用户</option>
                        </select>
                    </div>
                    <div class="flex justify-end space-x-3 mt-6">
                        <button type="button" onclick="hideAddUserModal()" class="px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                            取消
                        </button>
                        <button type="submit" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-4 py-2 rounded-lg hover:shadow-lg transition-all duration-300">
                            添加
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit User Modal -->
    <div id="editUserModal" class="fixed inset-0 bg-slate-900 bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-2xl max-w-md w-full transform transition-all">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-slate-800">编辑用户</h3>
                    <button onclick="hideEditUserModal()" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-times text-slate-600"></i>
                    </button>
                </div>
                <form class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">用户名 <span class="text-red-500">*</span></label>
                        <input type="text" id="edit-username" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all" required pattern="^[a-zA-Z0-9_]+$" oninput="validateUsername(this)">
                        <p class="mt-1 text-sm text-slate-500">请输入英文字符</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">邮箱 <span class="text-red-500">*</span></label>
                        <input type="email" id="edit-email" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all" required>
                        <p class="mt-1 text-sm text-slate-500">邮箱为找回密码使用，请填写公司邮箱</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">新密码</label>
                        <input type="password" id="edit-password" class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all" placeholder="留空则不修改密码">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">角色</label>
                        <select class="w-full px-4 py-2.5 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                            <option>管理员</option>
                            <option>普通用户</option>
                        </select>
                    </div>
                    <div class="flex justify-end space-x-3 mt-6">
                        <button type="button" onclick="hideEditUserModal()" class="px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                            取消
                        </button>
                        <button type="submit" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-4 py-2 rounded-lg hover:shadow-lg transition-all duration-300">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // 侧边栏折叠功能
        const sidebar = document.getElementById('sidebar');
        const sidebarToggle = document.getElementById('sidebarToggle');
        const fadeTexts = document.querySelectorAll('.fade-text');

        sidebarToggle.addEventListener('click', () => {
            const isCollapsed = sidebar.classList.contains('sidebar-collapsed');

            sidebar.classList.toggle('sidebar-collapsed');
            sidebar.classList.toggle('sidebar-expanded');

            setTimeout(() => {
                fadeTexts.forEach(text => {
                    if (sidebar.classList.contains('sidebar-collapsed')) {
                        text.classList.add('hidden');
                    } else {
                        text.classList.remove('hidden');
                    }
                });
            }, isCollapsed ? 0 : 200);
        });

        // 用户菜单
        const userMenuBtn = document.getElementById('userMenuBtn');
        const userMenu = document.getElementById('userMenu');

        userMenuBtn.addEventListener('click', () => {
            userMenu.classList.toggle('hidden');
            userMenu.classList.toggle('show');
        });

        // 点击外部关闭菜单
        document.addEventListener('click', (e) => {
            if (!userMenuBtn.contains(e.target) && !userMenu.contains(e.target)) {
                userMenu.classList.add('hidden');
                userMenu.classList.remove('show');
            }
        });

        // 时间显示
        function updateTime() {
            const now = new Date();
            const timeString = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
            document.getElementById('currentTime').textContent = timeString;
        }
        updateTime();
        setInterval(updateTime, 1000);

        // 全屏功能
        const fullscreenBtn = document.getElementById('fullscreenBtn');
        fullscreenBtn.addEventListener('click', () => {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen();
                fullscreenBtn.innerHTML = '<i class="fas fa-compress text-slate-600"></i>';
            } else {
                document.exitFullscreen();
                fullscreenBtn.innerHTML = '<i class="fas fa-expand text-slate-600"></i>';
            }
        });

        // Tab switching
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const tabName = this.getAttribute('data-tab');
                
                // Update button styles
                document.querySelectorAll('.tab-btn').forEach(b => {
                    b.classList.remove('border-blue-500', 'text-blue-600');
                    b.classList.add('border-transparent', 'text-gray-500');
                });
                this.classList.remove('border-transparent', 'text-gray-500');
                this.classList.add('border-blue-500', 'text-blue-600');
                
                // Update tab content
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.remove('active');
                });
                document.getElementById(`${tabName}-tab`).classList.add('active');
            });
        });

        // Toggle switch
        function toggleSwitch(element) {
            element.classList.toggle('active');
        }

        // Add user modal
        function showAddUserModal() {
            document.getElementById('addUserModal').classList.remove('hidden');
        }

        function hideAddUserModal() {
            document.getElementById('addUserModal').classList.add('hidden');
        }

        // Close modal when clicking outside
        document.getElementById('addUserModal').addEventListener('click', function(e) {
            if (e.target === this) {
                hideAddUserModal();
            }
        });

        // Username validation
        function validateUsername(input) {
            const value = input.value;
            const pattern = /^[a-zA-Z0-9_]+$/;
            
            if (!pattern.test(value)) {
                input.setCustomValidity('用户名只能包含英文字母、数字和下划线');
                input.classList.add('border-red-500');
            } else {
                input.setCustomValidity('');
                input.classList.remove('border-red-500');
            }
        }

        // Edit user modal functions
        function showEditUserModal(username, email) {
            document.getElementById('edit-username').value = username;
            document.getElementById('edit-email').value = email;
            document.getElementById('edit-password').value = '';
            document.getElementById('editUserModal').classList.remove('hidden');
        }

        function hideEditUserModal() {
            document.getElementById('editUserModal').classList.add('hidden');
        }

        // Close edit modal when clicking outside
        document.getElementById('editUserModal').addEventListener('click', function(e) {
            if (e.target === this) {
                hideEditUserModal();
            }
        });
    </script>
</body>
</html>